<template>
  <div class="coupon-stats">
    <StatCard
      v-for="stat in stats"
      :key="stat.key"
      :label="stat.label"
      :value="stat.value"
      :icon="stat.icon"
      :icon-bg-color="stat.color"
      :loading="loading"
      :trend="stat.trend"
      :trend-text="stat.trendText"
      :formatter="stat.formatter as any"
    />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { StatCard } from '@/components/common'
import { formatters } from '@/composables'

interface Props {
  loading?: boolean
  stats: {
    templateCount: number
    issuedCount: number
    usedCount: number
    totalDiscount: number
  }
}

const props = withDefaults(defineProps<Props>(), {
  loading: false
})

const stats = computed(() => [
  {
    key: 'template',
    label: '优惠券模板',
    value: props.stats.templateCount,
    icon: '🎟️',
    color: '#2563eb',
    trend: 8.5,
    trendText: '较上月增长'
  },
  {
    key: 'issued',
    label: '已发放',
    value: props.stats.issuedCount,
    icon: '📤',
    color: '#059669',
    trend: 15.2,
    trendText: '较上月增长'
  },
  {
    key: 'used',
    label: '已使用',
    value: props.stats.usedCount,
    icon: '✅',
    color: '#0284c7',
    trend: 12.8,
    trendText: '较上月增长'
  },
  {
    key: 'discount',
    label: '优惠金额',
    value: props.stats.totalDiscount,
    icon: '💰',
    color: '#d97706',
    trend: 18.9,
    trendText: '较上月增长',
    formatter: (value: number) => formatters.money(value)
  }
])
</script>

<style scoped>
.coupon-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  .coupon-stats {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
</style>